<template>
  <div id="app">
    <div class="loginBox">
      <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
      >
        <a-form-item>
          <a-input
            v-decorator="[
              'userName',
              {
                rules: [{ required: true, message: '请输入用户名！' }],
              },
            ]"
            placeholder="用户名"
          >
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [{ required: true, message: '请输入密码！' }],
              },
            ]"
            type="password"
            placeholder="密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox
            v-decorator="[
              'remember',
              {
                valuePropName: 'checked',
                initialValue: true,
              },
            ]"
          >
            Remember me
          </a-checkbox>
          <a-button type="primary" html-type="submit" class="login-form-button">
            Log in
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { adminLogin } from "@/api/index";
export default {
  name: "Login",
  components: { adminLogin },
  data() {
    return {};
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },

  methods: {
    handleSubmit(e) {
      console.log("点击了按钮");
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          adminLogin(values.userName, values.password).then((res) => {
            if (res.data.code == 200) {
              if (res.data.data) {
                this.$message.success("登录成功,即将跳转~");
                setTimeout(() => {
                    this.$router.push('home')
                }, 800);
                return;
              } else {
                return this.$message.error("登录失败");
              }
            }
            return this.$message.error("登录失败");
          });
        }
      });
    },
  },
};
</script>

<style >
body {
  background-color: rgb(242, 242, 244);
  overflow-y: hidden;
}
@media screen and (min-width: 700px) {
  #app {
    width: 500px;
    margin: 0 auto;
  }
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
.loginBox {
  margin-top: 100px;
  padding: 0 25px;
}
</style>